<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .banner{width: 300px;height:90px;margin: 0 auto;position: relative;}

    .banner .imgbox{position: absolute;left:0px;}
    .banner .imgbox img{width: 300px;height: 90px;float: left;}

    .banner .btns input{position: absolute;width: 30px;height:30px;top: 30px;}
    .banner .btns .left{left:0;}
    .banner .btns .right{right:0;}
  </style>
</head>
<body>
  <div class="banner">
    <div class="imgbox">
    </div>
    <div class="btns">
      <input type="button" value="<" class="left">
      <input type="button" value=">" class="right">
    </div>
  </div>
</body>
<script src="../move.js"></script>
<script>
  // 模拟后台给的图片数据
  const bannerData = [{
    name:"图1",
    src:"../imgs/banner1.jpg"
  },{
    name:"图2",
    src:"../imgs/banner2.jpg"
  },{
    name:"图3",
    src:"../imgs/banner3.jpg"
  },{
    name:"图4",
    src:"../imgs/banner4.jpg"
  },{
    name:"图5",
    src:"../imgs/banner5.jpg"
  }];

  const imgbox = document.querySelector(".imgbox");
  const left = document.querySelector(".left");
  const right = document.querySelector(".right");

  // 遍历解析数据，拼接页面结构字符
  let str = "";
  bannerData.forEach(val=>{
    str += `<img src="${val.src}" title="${val.name}" alt="${val.name}">`;
  })
  // 设置到指定容器
  imgbox.innerHTML = str;

  // 获取所有图片元素
  const imgs = document.querySelectorAll(".imgbox img");

  // 设置imgbox的初始宽度，保证所有图片在一行显示
  imgbox.style.width = imgs.length * imgs[0].offsetWidth + "px";

  // 设置默认索引
  let index = 0;
  imgbox.style.left = -index * imgs[0].offsetWidth + "px";


  left.onclick = function(){
    // 计算索引
    if(index === 0){
      index = imgs.length-1
    }else{
      index--;
    }
    // 根据索引重新计算imgbox的位置，通过动画函数设置
    move(imgbox, {
      left: -index * imgs[0].offsetWidth
    })
  }


  // right.onclick = function(){}

</script>
</html>